<!-- LoadingComponents -->
<template>
<div id="main" v-show="value">
  <div class="box">
    <p class="text">
      <img src="/static/img/Pulse-1s-200px.png" alt="" style="width: 60px; height:60px;">
      <br>
      {{text}}
    </p>
    <button @click="close" style="position:fixed; bottom:0; left:0px;">close</button>
  </div>
</div>
</template>

<script>
export default {
  name: 'LoadingComponents',
  data() {
    return {
      value: false,
      text: '加载中...',
      timeout: 2000
    }
  },
  methods: {
    close: function() {
      this.value = false
      // this.$destroy(true)
    },
    open: function() {
      this.value = true
    }
  },
  destroyed() {
    // document.body.removeChild(this.$el)
  }
}
</script>
<style>

#main{
    width: 100%;
    height: 100%;
  }
  /* #dialog{
    border-radius: 15px;
    text-align: center;
    width: 50%;
    height: 50%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background-color: white;
  } */
  .box{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    background: rgba(0,0,0,0.5);
  }
  .text {
    color: white;
    width: 100%;
    margin-top: 20%;
    /* height: 45px;
    display: block;
    line-height: 100%; */
    text-align: center;
    display: block;
  }
</style>
